<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>未定义-列表页</title>
    <link rel="stylesheet" th:href="@{/resources/bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/resources/plugins/bootstrap-table/bootstrap-table.min.css}">
    <link rel="stylesheet" th:href="@{/resources/awi/css/font-awesome.css}">
    <!-- Theme style -->
    <link rel="stylesheet" th:href="@{/resources/awi/css/AdminLTE.min.css}">
    <link rel="stylesheet" th:href="@{/resources/awi/css/skins/all-skins.min.css}">
    <link rel="stylesheet" th:href="@{/resources/plugins/ztree/css/zTreeStyle/zTreeStyle.css}">
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div class="page-header">
                <h3>文件中心
                </h3>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-2">
            <div class="box box-solid box-info">
                <div class="box-header">目录<button type="button" class="btn btn-info btn-xs pull-right" onclick="createFolder()"><i class="fa fa-plus"></i></button></div>
                <div class="box-body" style="height: 800px;">
                    <div class="ztree" id="folderTree"></div>
                </div>
                <div class="box-footer">

                </div>
            </div>
        </div>
        <div class="col-md-10">
            <div class="col-md-12">
                <div class="box box-solid box-info">
                    <div class="box-header">查询</div>
                    <div class="box-body">
                        <form id="search-form" class="form-inline">
                            <div class="col-md-3 form-group">
                                <label>文件名称</label>
                                <input type="text" class="form-control params" name="" id="">
                            </div>
                            <div class="col-md-3 form-group">
                                <label>文件夹</label>
                                <input type="hidden" name="parentId" id="parentId">
                                <input type="text" readonly class="form-control params"  id="parentName" placeholder="请点击左侧目录菜单选择文件夹...">
                            </div>
                            <div class="col-md-3">
                                <div class="btn-group">
                                    <button type="button" class="btn btn-success"
                                            onclick="tableDataRefresh('#file-data-table')"><i class="fa fa-search"></i>查询
                                    </button>
                                    <button type="reset" class="btn btn-warning"><i class="fa fa-refresh"></i> 重置</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="col-md-12" id="toolbar">
                <div class="btn-group btn-group-xs">
                    <button type="button" class=" btn btn-info" onclick="createNew('file')"><i class="fa fa-upload"></i>文件上传
                    </button>
                    <button type="button" class="btn btn-danger" onclick="batchRemove()"><i class="fa fa-remove"></i>删除
                    </button>
                    <button type="button" class="btn btn-success" onclick="tableDataRefresh('#file-data-table')"><i
                            class="fa fa-refresh"></i>刷新
                    </button>
                </div>
                <hr>
            </div>

            <div class="col-md-12 table-responsive">
                <table id="file-data-table" data-url="/file/getPagingData" class="data-table"
                       data-locale="zh-CN" data-pagination="true" data-response-handler="dataTableResponseHandler"
                       data-unique-id="uid" data-id-field="id" data-side-pagination="server"
                       data-classes="table table-hover table-no-bordered"
                       data-toolbar="toolbar" data-query-params-type="limit" data-height="730" data-striped="true"
                       data-click-to-select="true"
                       data-query-params="dataTableQueryParams" data-method="post"
                       data-content-type="application/x-www-form-urlencoded"
                >
                    <thead>
                    <tr>
                        <th data-title="多选" data-field="ck" data-align="center" data-valign="middle"
                            data-checkbox=true></th>
                        <th data-title="文件名" data-field="fileName" data-align="center" data-valign="middle" data-width="350"
                            data-formatter="titleFormatter"></th>
                        <th data-title="文件类型" data-field="fileType" data-align="center" data-valign="middle" data-formatter="fileTypeFormatter"
                            data-width="50"></th>
                        <th data-title="文件大小" data-field="fileSize" data-align="center" data-valign="middle"
                            data-width="150"></th>
                        <th data-title="下载次数" data-field="downloadCounts" data-align="center" data-valign="middle"
                            data-width="50"></th>

                        <th data-title="创建时间" data-field="createTime" data-align="center" data-valign="middle"
                            data-width="150" data-formatter="timeFormatter"></th>
                        <th data-title="更新时间" data-field="updateTime" data-align="center" data-valign="middle"
                            data-width="150"></th>
                        <th data-title="操作" data-field="uid" data-align="center" data-valign="middle" data-width="200"
                            data-formatter="opFormatter"></th>
                    </tr>
                    </thead>

                </table>
            </div>
        </div>

    </div>

    <div class="row">

    </div>
</div>
</body>
<script th:src="@{/resources/plugins/jQuery/jquery-2.2.3.min.js}"></script>
<!-- Bootstrap 3.3.6 -->
<script th:src="@{/resources/bootstrap/js/bootstrap.min.js}"></script>

<!-- Bootstrap 3.3.6 -->
<script th:src="@{/resources/plugins/bootstrap-table/bootstrap-table.min.js}"></script>
<script th:src="@{/resources/plugins/bootstrap-table/bootstrap-table-locale-all.min.js}"></script>
<script th:src="@{/resources/layer/layer.js}"></script>
<script th:src="@{/resources/plugins/plugins-init/plugins-init.js}"></script>
<script th:src="@{/resources/commons/js/prototype.js}"></script>
<script th:src="@{/resources/plugins/ztree/js/jquery.ztree.all.js}"></script>
<script type="text/javascript">
    //新增创建
    function createNew() {
        var createView = layer.open({
            title: '未定义新增',
            type: 2,
            content: '/file/toCreateView',
            area: ['800px', '600px'],
            maxmin: true,
            end: function () {
                tableDataRefresh('#file-data-table');
            }
        });
        layer.full(createView);
    }

    function createFolder() {
        var createView = layer.open({
            title: '新建文件夹',
            type: 2,
            content: '/file/toCreateFolderView',
            area: ['800px', '600px'],
            maxmin: true,
            end: function () {
                tableDataRefresh('#file-data-table');
            }
        });
        layer.full(createView);
    }

    //信息编辑
    function edit(uid) {
        var editView = layer.open({
            title: '未定义编辑',
            type: 2,
            content: '/file/toEditView?uid=' + uid,
            area: ['800px', '600px'],
            maxmin: true,
            end: function () {
                tableDataRefresh('#file-data-table');
            }
        });
        layer.full(editView);
    }

    //删除
    function remove(uid) {
        $.get("/file/remove?uid=" + uid, function (data) {
            $("#file-data-table").bootstrapTable('refresh');
        })
    }

    //批量删除
    function batchRemove() {
        var selectedRows = $("#file-data-table").bootstrapTable('getAllSelections');
        var uids = [];
        $.each(selectedRows, function (index, value) {
            uids.push(value.uid);
        })
        $.post("/file/batchRemove", {"uids": uids}, function (data) {
            $("#file-data-table").bootstrapTable('refresh');
        })
    }


    function titleFormatter(value, row, index) {
        var  _href=row.fileUrl;
        return '<a href="' + _href + '">' + value + '</a>';
    }
    function fileTypeFormatter(value,row,index) {
        if('文件夹'==row.fileType){
            return '<i class="fa fa-folder-o"></i>';
        }else if('文件'==row.fileType){
            return '<i class="fa fa-file-o "></i>';
        }
    }
    function opFormatter(value, row, index) {
        var removeBtn = '<a class="btn btn-danger" href="javascript:remove(\''+row.uid+'\')"><i class="fa fa-remove"></i>删除</a>';
        var downloadBtn = '<a class="btn btn-success" href="javascript:edit(\''+row.uid+'\')" ><i class="fa fa-download"></i>下载</a></li>';
        var previewBtn = '<a class="btn btn-info" href="javascript:edit(\''+row.uid+'\')" ><i class="fa fa-eye"></i>预览</a>';
        var btnGroup;
        if('文件'==row.fileType){
            btnGroup=previewBtn+removeBtn+downloadBtn;
        }else{
            var goIntoBtn='<button type="button" class="btn btn-info">进入<i class="fa fa-level-down"></i></button>';
            btnGroup=removeBtn+goIntoBtn;
        }
        return '<div class="btn-group btn-group-xs">'+btnGroup+'</div>'

    }

    function  getFile(){

    }
    function openFolder(uid){
        alert(uid);
    }
    $(function(){
        $.get("/file/listFolder",function(result){
            var setting = {
                data:
                    {
                        simpleData:
                            {
                                enable: true,
                                idKey: "id",
                                pIdKey: "pId",
                                rootPId: 0
                            }
                    },
                callback: {
                    onClick: queryFolderFile
                }

            };
            $.fn.zTree.init($("#folderTree"), setting, result.data);
        })
    })
    function queryFolderFile(event, treeId, treeNode) {

        if('1'==treeNode.id){
            $("#parentId").val("");
            $("#parentName").val(treeNode.name);
        }else{
            $("#parentId").val(treeNode.id);
            $("#parentName").val(treeNode.name);
        }

        $("#file-data-table").bootstrapTable('refresh');
    }

</script>
</html>
<!--
/**
 * @ClassName 新增-未定义
 * @Description TODO
 * @Company 会飞的锅工作室
 * @Author yuelh
 * @Email 527083487@qq.com
 * @Date 2020/06/20 11:10:04
 * @Version 1.0
-->